<ion-header>
  <ion-toolbar>
    <ion-title>Installed Services</ion-title>
    <ion-buttons slot="end">
      <badge-menu-button></badge-menu-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding with-widgets">
  <!-- loaded -->
  <ng-container *ngIf="pkgs$ | async as pkgs; else loading">
    <ng-container *ngIf="!pkgs.length; else list">
      <div class="welcome-header">
        <h1>Welcome to StartOS</h1>
      </div>
      <widget-list></widget-list>
    </ng-container>

    <ng-template #list>
      <ion-grid>
        <ion-row>
          <ion-col
            *ngFor="let pkg of pkgs"
            responsiveCol
            sizeSm="12"
            sizeMd="6"
          >
            <app-list-pkg
              *ngIf="pkg.manifest.id | packageInfo | async as info"
              [pkg]="info"
            ></app-list-pkg>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ng-template>
  </ng-container>

  <!-- loading -->
  <ng-template #loading>
    <text-spinner text="Connecting to server"></text-spinner>
  </ng-template>
</ion-content>
